<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>邀请好友</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
    }

    .btn {
      margin: 1.68rem 2.6rem;
      height: 1.88rem;
      line-height: 1.88rem;
      background: #F30619;
      border-radius: 0.94rem;
      text-align: center;
      color: #FFFFFF;
      font-size: 0.8rem;
    }

    .top {
      position: relative;
    }

    .logo {
      position: absolute;
      top: 3.7rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 3.2rem;
      height: 3.2rem;
    }

    .middle {
      padding: 0 0.8rem;
      margin-top: 1.12rem;
    }

    .code {
      color: #454647;
      font-size: 0.8rem;
      margin-top: 0.83rem;
    }

    .code span {
      color: #999999;
    }

    .input {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999999;
      position: relative;
    }

    .input input[type='number'] {
      flex: 1;
      text-align: center;
    }

    .tip {
      position: absolute;
      top: 50%;
      right: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      color: #554A82;
      font-size: 0.8rem;
    }

    .loading {
      width: 80px;
      height: 40px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .loading span {
      display: inline-block;
      width: 8px;
      height: 100%;
      border-radius: 4px;
      background: lightgreen;
      -webkit-animation: load 1s ease infinite;
    }

    @-webkit-keyframes load {
      0%, 100% {
        height: 40px;
        background: lightgreen;
      }
      50% {
        height: 70px;
        margin: -15px 0;
        background: lightblue;
      }
    }

    .loading span:nth-child(2) {
      -webkit-animation-delay: 0.2s;
    }

    .loading span:nth-child(3) {
      -webkit-animation-delay: 0.4s;
    }

    .loading span:nth-child(4) {
      -webkit-animation-delay: 0.6s;
    }

    .loading span:nth-child(5) {
      -webkit-animation-delay: 0.8s;
    }

    .tip2 {
      text-align: center;
      font-size: 0.8rem;
      color: #999999;
      margin-top: 3rem;
    }
  </style>
</head>
<body>
<div id="app" v-cloak="">
  <div v-if="!isRegister">
    <div class="top">
      <img src="/static/admin/jingtaiwu/bg.png" alt="" style="width: 100%">
      <img src="/static/admin/jingtaiwu/logo.png" alt="" class="logo">
    </div>
    <div class="middle">
      <div class="input">
        <input type="number" placeholder="请输入手机号" v-model="phone">
      </div>
      <div class="input" style="margin-top: 1.5rem">
        <input type="number" placeholder="请输入验证码" v-model="code">
        <div class="tip" @click="sendCode">{{word}}</div>
      </div>
      <div class="code">
        邀请码：<span>{{invite}}</span>
      </div>
    </div>
    <div class="btn" @click="register">注册</div>
  </div>
  <div v-else>
    <div class="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="tip2" onclick="tz()">注册成功,正在跳转到下载</div>
  </div>
</div>
</body>
</html>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id1468418168';
        } else {
          window.close();
        }
      }, 3000);
    } else {
      window.setTimeout(function () {
        window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mm';
      }, 3000);
    }
  }

  var time = 60;
  var _ApiPath = "https://csdl.jintianjifen.cn/";
  var apibasesendVerifyCode = _ApiPath + "api/base/sendVerifyCode";
  var apibaseregister = _ApiPath + 'api/base/register';
  vm = new Vue({
    el: '#app',
    data: function () {
      return {
        phone: '',
        code: '',
        canSend: true,
        word: '获取验证码',
        invite: getQueryVariable('invite') || '',
        isRegister: false
      };
    },
    methods: {
      sendCode: function () {
        if (!this.canSend) {
          return;
        }
        var _self = this;
        if (isMobile(this.phone)) {
          var data = {
            type: '1',
            phone: _self.phone
          };
          data = {
            values: data
          };
          $.ajax({
            type: "POST",
            url: apibasesendVerifyCode,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            data: data.values,
            dataType: "json",
            success: function (ret) {
              if (ret.status == '200') {
                _self.canSend = false;
                _self.timer = setInterval(function () {
                  _self.word = time + 's';
                  time--;
                  if (time <= 0) {
                    clearInterval(_self.timer);
                    time = 60;
                    _self.word = '再次发送';
                    _self.canSend = true;
                  }
                }, 1000);
              } else {
                alert(ret.msg);
              }
            },
            error: function (e) {
              alert('发送失败');
            }
          });
        } else {
          alert("手机号不正确");
        }
      },
      register: function () {
        if (!isMobile(this.phone)) {
          alert("手机号不正确");
          return;
        }
        if (this.code.length != 6) {
          alert("请输入6位验证码");
          return;
        }
        var data = {
          phone: this.phone,
          code: this.code,
          invite_code: this.invite
        };
        var _self = this;
        $.ajax({
          type: "POST",
          url: apibaseregister,
          contentType: 'application/x-www-form-urlencoded;charset=utf-8',
          data: data,
          dataType: "json",
          success: function (ret) {
            if (ret.status == '200') {
              alert('注册成功');
              _self.isRegister = true;
              setTimeout(function () {
                tz();
              });
            } else {
              alert(ret.msg);
            }
          },
          error: function (e) {
            alert('发送失败');
          }
        });
      }
    }
  });

  // 验证验证码
  function isMobile(val) {
    var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    return reg.test(val);
  }
</script>
